iT邦幫忙

2026 iThome 鐵人賽

DAY 7
0

大家好~沒想到我能堅持一個禮拜發文(得意),今天要來介紹聯合型別和交叉型別,其實原本只想做聯合型別的介紹,後來發現交叉型別也能跟聯合型別放在一起講,加上單做聯合型別的話,內容太少了(哭哭),同時也覺得兩個放在一起講效果不錯,於是今天的文章就誕生了!


聯合型別

定義:一個值可以是多種型別的其中一種,常用|表示,類似於布林代數的OR。

let age: string | number ;
age = 23;
age = "23"; //兩種寫法都可以!

//錯誤寫法:
age = true; //因為布林不在聯合型別中,因此TS會報錯
//也能夠搭配前一章介紹的陣列使用
let array: (string|number)[] = ["Henry", 90, "Amy", 87];

交叉型別

定義:能夠將多個型別組合成一個型別,常用&表示,類似於布林值的AND。如果套用在物件上,就代表這個物件得同時具備所有被交叉型別的成員。

//定義學生的基本型別
type student = {
	name: string;
	major: string;
};

//定義社團幹部的型別
type clubLeader = {
	clubName: string;
	role: string;
};

//接著將兩個物件的屬性用&合併起來
type superStudent = student & clubLeader;

//宣告一個superStudent變數,必須包含上面所有的屬性
const me: superStudent = {
	name: "Judy",
	major: "資管系",
	clubName: "吉他社",
	role: "活動長"
};

//錯誤寫法:
const me: superStudent ={
	name: "Judy",
	major: "資管系",
	clubName: "吉他社",
}; //此處少寫屬性role,如果缺少任一屬性,TS會因此報錯

另外,需要注意一件事:如果兩個不同的原始型別沒有共同的值,在交叉型別時,如果寫成這樣:

type a = string & boolean; //不存在一個同時是字串又是布林的值

會被TS判斷為never型別,導致變數a無法被賦值。

  • 關於never是甚麼?
    • 之後會有一篇特別介紹TS的特殊型別,今天先賣個關子,到時候我們再來探討一下吧!

小結

今天介紹了聯合型別和交叉型別,簡單做了一個表格重點整理一下:

聯合型別 交叉型別
符號 | &
布林代數 OR AND
概念 能夠是A型別,也可以是B型別 得同時符合多個型別
賦值規範 只須滿足其中一個型別條件 須滿足全部型別的成員
應用 處理後端API可能回傳不同的資料型別 增強物件的屬性或方法、當物件須滿足多個條件時

以上就是我們今天介紹的內容啦!明天要介紹介面(Interface)和型別別名(Type Alias),我們明天見!


上一篇
[Day-6]陣列x元組
下一篇
[Day-8] 型別別名x介面
系列文
從零開始學習TypeScript:菜鳥的入門介紹與概覽22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言